<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting } from '@element-plus/icons-vue'

// 表单数据
const form = reactive({
  siteName: '后台管理系统',
  siteTitle: '通用后台管理系统',
  siteKeywords: '后台,管理系统,Vue,Element Plus',
  siteDescription: '基于Vue 3和Element Plus构建的通用后台管理系统',
  siteLogo: 'https://picsum.photos/seed/logo/200/60.jpg',
  siteFavicon: 'https://picsum.photos/seed/favicon/32/32.jpg',
  siteCopyright: '© 2023 后台管理系统 版权所有',
  siteIcp: '京ICP备12345678号',
  siteAuthor: '管理员',
  siteEmail: 'admin@example.com',
  sitePhone: '13800138000',
  siteAddress: '北京市朝阳区',
  siteStatus: 1,
  siteCloseReason: '',
  allowRegister: 1,
  defaultRole: 3,
  articleReview: 1,
  commentReview: 1,
  uploadFileSize: 2,
  uploadFileType: 'jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx',
  uploadFileCount: 5,
  siteTheme: 'default',
  siteLanguage: 'zh-CN',
  // Email设置
  emailEnabled: 1,
  emailHost: 'smtp.example.com',
  emailPort: 465,
  emailUsername: 'noreply@example.com',
  emailPassword: 'password',
  emailFromName: '后台管理系统',
  emailEncryption: 'ssl',
  emailTestAddress: 'test@example.com'
})

// 表单验证规则
const rules = {
  siteName: [
    { required: true, message: '请输入网站名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  siteTitle: [
    { required: true, message: '请输入网站标题', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  siteEmail: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  sitePhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  uploadFileSize: [
    { type: 'number', message: '请输入数字', trigger: 'blur' }
  ],
  uploadFileCount: [
    { type: 'number', message: '请输入数字', trigger: 'blur' }
  ],
  // Email设置验证规则
  emailHost: [
    { required: true, message: '请输入邮件服务器地址', trigger: 'blur' }
  ],
  emailPort: [
    { required: true, message: '请输入邮件服务器端口', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' }
  ],
  emailUsername: [
    { required: true, message: '请输入邮件服务器用户名', trigger: 'blur' }
  ],
  emailPassword: [
    { required: true, message: '请输入邮件服务器密码', trigger: 'blur' }
  ],
  emailFromName: [
    { required: true, message: '请输入发件人名称', trigger: 'blur' }
  ],
  emailEncryption: [
    { required: true, message: '请选择加密方式', trigger: 'change' }
  ],
  emailTestAddress: [
    { type: 'email', message: '请输入正确的测试邮箱地址', trigger: 'blur' }
  ]
}

// 角色选项
const roleOptions = ref([
  { id: 1, name: '超级管理员' },
  { id: 2, name: '内容管理员' },
  { id: 3, name: '普通管理员' }
])

// 主题选项
const themeOptions = ref([
  { label: '默认主题', value: 'default' },
  { label: '暗黑主题', value: 'dark' },
  { label: '蓝色主题', value: 'blue' }
])

// 语言选项
const languageOptions = ref([
  { label: '简体中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' }
])

// Email加密方式选项
const encryptionOptions = ref([
  { label: 'SSL', value: 'ssl' },
  { label: 'TLS', value: 'tls' },
  { label: '无加密', value: 'none' }
])

// 表单引用
const formRef = ref()

// 当前激活的标签页
const activeTab = ref('basic')

// 初始化数据
onMounted(() => {
  // 这里可以添加获取网站设置的API请求
})

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      // 模拟API请求
      setTimeout(() => {
        ElMessage.success('保存成功')
      }, 500)
    }
  })
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 测试邮件发送
const testEmail = () => {
  if (!form.emailTestAddress) {
    ElMessage.warning('请输入测试邮箱地址')
    return
  }
  
  // 模拟API请求
  setTimeout(() => {
    ElMessage.success('测试邮件已发送，请查收')
  }, 500)
}
</script>

<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span><el-icon><Setting /></el-icon> 网站设置</span>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-tabs v-model="activeTab">
          <!-- 基本设置 -->
          <el-tab-pane label="基本设置" name="basic">
            <el-form-item label="网站名称" prop="siteName">
              <el-input v-model="form.siteName" placeholder="请输入网站名称" />
            </el-form-item>
            <el-form-item label="网站标题" prop="siteTitle">
              <el-input v-model="form.siteTitle" placeholder="请输入网站标题" />
            </el-form-item>
            <el-form-item label="网站关键词" prop="siteKeywords">
              <el-input v-model="form.siteKeywords" placeholder="请输入网站关键词，多个关键词用英文逗号分隔" />
            </el-form-item>
            <el-form-item label="网站描述" prop="siteDescription">
              <el-input v-model="form.siteDescription" type="textarea" :rows="3" placeholder="请输入网站描述" />
            </el-form-item>
            <el-form-item label="网站Logo">
              <el-input v-model="form.siteLogo" placeholder="请输入网站Logo地址" />
              <div class="image-preview" v-if="form.siteLogo">
                <el-image :src="form.siteLogo" fit="contain" style="width: 200px; height: 60px;" />
              </div>
            </el-form-item>
            <el-form-item label="网站图标">
              <el-input v-model="form.siteFavicon" placeholder="请输入网站图标地址" />
              <div class="image-preview" v-if="form.siteFavicon">
                <el-image :src="form.siteFavicon" fit="contain" style="width: 32px; height: 32px;" />
              </div>
            </el-form-item>
            <el-form-item label="版权信息" prop="siteCopyright">
              <el-input v-model="form.siteCopyright" placeholder="请输入版权信息" />
            </el-form-item>
            <el-form-item label="备案信息" prop="siteIcp">
              <el-input v-model="form.siteIcp" placeholder="请输入备案信息" />
            </el-form-item>
          </el-tab-pane>
          
          <!-- 联系设置 -->
          <el-tab-pane label="联系设置" name="contact">
            <el-form-item label="站长姓名" prop="siteAuthor">
              <el-input v-model="form.siteAuthor" placeholder="请输入站长姓名" />
            </el-form-item>
            <el-form-item label="联系邮箱" prop="siteEmail">
              <el-input v-model="form.siteEmail" placeholder="请输入联系邮箱" />
            </el-form-item>
            <el-form-item label="联系电话" prop="sitePhone">
              <el-input v-model="form.sitePhone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="联系地址" prop="siteAddress">
              <el-input v-model="form.siteAddress" placeholder="请输入联系地址" />
            </el-form-item>
          </el-tab-pane>
          
          <!-- 系统设置 -->
          <el-tab-pane label="系统设置" name="system">
            <el-form-item label="网站状态">
              <el-radio-group v-model="form.siteStatus">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="关闭原因" v-if="form.siteStatus === 0">
              <el-input v-model="form.siteCloseReason" type="textarea" :rows="3" placeholder="请输入网站关闭原因" />
            </el-form-item>
            <el-form-item label="允许注册">
              <el-radio-group v-model="form.allowRegister">
                <el-radio :label="1">允许</el-radio>
                <el-radio :label="0">不允许</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="默认角色">
              <el-select v-model="form.defaultRole" placeholder="请选择默认角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="文章审核">
              <el-radio-group v-model="form.articleReview">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="评论审核">
              <el-radio-group v-model="form.commentReview">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
          
          <!-- 上传设置 -->
          <el-tab-pane label="上传设置" name="upload">
            <el-form-item label="文件大小限制" prop="uploadFileSize">
              <el-input-number v-model="form.uploadFileSize" :min="1" :max="100" />
              <span class="unit">MB</span>
            </el-form-item>
            <el-form-item label="允许上传类型" prop="uploadFileType">
              <el-input v-model="form.uploadFileType" placeholder="请输入允许上传的文件类型，多个用英文逗号分隔" />
            </el-form-item>
            <el-form-item label="单次上传数量" prop="uploadFileCount">
              <el-input-number v-model="form.uploadFileCount" :min="1" :max="20" />
              <span class="unit">个</span>
            </el-form-item>
          </el-tab-pane>
          
          <!-- 界面设置 -->
          <el-tab-pane label="界面设置" name="ui">
            <el-form-item label="网站主题">
              <el-radio-group v-model="form.siteTheme">
                <el-radio v-for="item in themeOptions" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="网站语言">
              <el-select v-model="form.siteLanguage" placeholder="请选择网站语言">
                <el-option
                  v-for="item in languageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-tab-pane>
          
          <!-- Email设置 -->
          <el-tab-pane label="邮件设置" name="email">
            <el-form-item label="启用邮件">
              <el-radio-group v-model="form.emailEnabled">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="邮件服务器" prop="emailHost" v-if="form.emailEnabled === 1">
              <el-input v-model="form.emailHost" placeholder="请输入邮件服务器地址，如：smtp.example.com" />
            </el-form-item>
            <el-form-item label="服务器端口" prop="emailPort" v-if="form.emailEnabled === 1">
              <el-input-number v-model="form.emailPort" :min="1" :max="65535" />
              <span class="unit">常用端口：25, 465, 587</span>
            </el-form-item>
            <el-form-item label="用户名" prop="emailUsername" v-if="form.emailEnabled === 1">
              <el-input v-model="form.emailUsername" placeholder="请输入邮件服务器用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="emailPassword" v-if="form.emailEnabled === 1">
              <el-input v-model="form.emailPassword" type="password" placeholder="请输入邮件服务器密码" show-password />
            </el-form-item>
            <el-form-item label="发件人名称" prop="emailFromName" v-if="form.emailEnabled === 1">
              <el-input v-model="form.emailFromName" placeholder="请输入发件人名称" />
            </el-form-item>
            <el-form-item label="加密方式" prop="emailEncryption" v-if="form.emailEnabled === 1">
              <el-select v-model="form.emailEncryption" placeholder="请选择加密方式">
                <el-option
                  v-for="item in encryptionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="测试邮箱" prop="emailTestAddress" v-if="form.emailEnabled === 1">
              <el-input v-model="form.emailTestAddress" placeholder="请输入测试邮箱地址" />
              <el-button type="primary" @click="testEmail" style="margin-left: 10px;">发送测试邮件</el-button>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        
        <el-form-item class="form-actions">
          <el-button type="primary" @click="submitForm">保存设置</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </template>
  
  <style scoped>
.settings-container {
  padding: 20px;
  height: calc(100vh - 30px);
  overflow-y: auto;
  box-sizing: border-box;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.card-header .el-icon {
  margin-right: 8px;
}

.image-preview {
  margin-top: 10px;
}

.unit {
  margin-left: 10px;
  color: #909399;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

/* 表单项间距优化 */
.el-form-item {
  margin-bottom: 22px;
}

/* 标签页样式优化 */
.el-tabs {
  margin-bottom: 20px;
}

.el-tabs__content {
  padding: 10px 0;
}

/* 输入框样式优化 */
.el-input, .el-select {
  max-width: 500px;
}

.el-textarea {
  max-width: 500px;
}

/* 图片预览样式优化 */
.image-preview {
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  display: inline-block;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }
  
  .el-form-item {
    margin-right: 0;
  }
  
  .el-input, .el-select, .el-textarea {
    max-width: 100%;
  }
  
  .form-actions {
    text-align: left;
  }
  
  .form-actions .el-button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  
  .form-actions .el-button:last-child {
    margin-bottom: 0;
  }
}

/* 数字输入框样式优化 */
.el-input-number {
  width: 150px;
}

/* 单选按钮组样式优化 */
.el-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 卡片内容区域样式优化 */
.el-card__body {
  padding: 20px;
}

/* 标签页标题样式优化 */
.el-tabs__item {
  font-weight: 500;
}

/* 图片预览容器样式优化 */
.image-preview .el-image {
  border-radius: 4px;
  overflow: hidden;
}

/* 表单操作区域按钮间距优化 */
.form-actions .el-button + .el-button {
  margin-left: 15px;
}
</style>